<template>
  <div class="e-map" ref="e-map"></div>
</template>

<style lang="scss" scoped>
.e-map {
  width: 100%;
  height: 100%;
}
</style>
<script>
export default {
  data() {
    let mapName = "china";
    return {
      resizeTimer: null,
      echarts: null,
      showData: null,
      toolTipData: null,
      mapName,
      mapInitData: null,
      tooltip: {
        padding: 0,
        enterable: true,
        transitionDuration: 1,
        textStyle: {
          color: "#000",
          decoration: "none",
        },
        formatter: function (params) {
          var tipHtml = "1";
          return tipHtml;
        },
      },
      visualMap: {
        show: true,
        min: 0,
        max: 200,
        left: "10%",
        top: "bottom",
        calculable: true,
        seriesIndex: [1],
        inRange: {
          color: ["#04387b", "#467bc0"], // 蓝绿
        },
      },
      geo: {
        show: true,
        map: mapName,
        label: {
          normal: {
            show: false,
          },
          emphasis: {
            show: true,
          },
        },
        roam: true,
        itemStyle: {
          normal: {
            areaColor: "#023677",
            borderColor: "#1180c7",
          },
          emphasis: {
            areaColor: "#4499d0",
          },
        },
      },
    };
  },
  methods: {
    // 获取展示点的数据
    async getShowData() {
      let {
        data: { showData, toolTipData },
      } = await require("./cityData.json");
      this.showData = showData;
      this.toolTipData = toolTipData;
    },
    // 获取地图基本数据
    async getMapInit() {
      let { data } = await axios.get("/static/china_data.json", {
        noApped: true,
      });
      this.mapInitData = data;
    },
    // 初始化地图
    async initEchart() {
      let { tooltip, visualMap, geo, mapInitData, showData } = this;
      let data = showData.map(item => ({
        name: item.name,
        value: mapInitData.features.find(key => item.name === key.properties.name)?.properties?.center?.concat([Math.random() * 200]) ?? []
      }))
      const option = {
        // 提示框组件
        tooltip,
        // 范围选择器组件
        visualMap,
        // 地理坐标系组件
        geo,
        series: [
          {
            name: "散点",
            type: "scatter",
            coordinateSystem: "geo",
            data: showData,
            symbolSize: function (val) {
              return val[2] / 10;
            },
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                show: true,
              },
              emphasis: {
                show: true,
              },
            },
            itemStyle: {
              normal: {
                color: "#fff",
              },
            },
          },
          {
            type: "map",
            map: this.mapName,
            geoIndex: 0,
            aspectScale: 0.75, //长宽比
            showLegendSymbol: false, // 存在legend时显示
            label: {
              normal: {
                show: true,
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: "#fff",
                },
              },
            },
            itemStyle: {
              normal: {
                areaColor: "#031525",
                borderColor: "#3B5077",
              },
              emphasis: {
                areaColor: "#2B91B7",
              },
            },
            animation: false,
            data: mapInitData.features.map((item) => ({
              name: item.properties.name,
              value: parseInt(Math.random() * 200),
              ...item,
            })),
          },
          {
            name: "Top 5",
            type: "effectScatter",
            coordinateSystem: "geo",
            data: data,
            symbolSize: function (val) {
              return val[2] / 10;
            },
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
            },
            hoverAnimation: true,
            label: {
              normal: {
                formatter: "{b}",
                position: "left",
                show: false,
              },
            },
            itemStyle: {
              normal: {
                color: "yellow",
                shadowBlur: 10,
                shadowColor: "yellow",
              },
            },
            zlevel: 1,
          },
        ],
      };
      this.echarts = this.$echarts.init(this.$refs["e-map"]);
      this.$echarts.registerMap(this.mapName, this.mapInitData);
      this.echarts.setOption(option);
     window.addEventListener("resize", () => {
        if (this.resizeTimer) {
          clearTimeout(this.resizeTimer);
        }
        this.resizeTimer = setTimeout(() => {
          this.echarts.resize();
        }, 400);
      });
      this.echarts.on("click", (e) => {
        console.log(e);
      });
    },
  },
  async mounted() {
    await this.getMapInit();
    await this.getShowData();
    await this.initEchart();
  },
  beforeDestroy() {
    window.removeEventListener("resize", () => {
      this.echarts.resize();
    });
  },
};
</script>